import { Layout, Popover, Button, Modal, Form, Input, Select, Message } from '@arco-design/web-react';
import { IconUser } from '@arco-design/web-react/icon'
import { useState } from 'react';
import { useDispatch } from 'react-redux';
import { useNavigate } from 'react-router';
import { regExpConfig } from '../../../configs/regular.config'
import '../../../styles/app.css'
const FormItem = Form.Item;
const Header = Layout.Header;
const style = {
    margin: 0,
};
const formItemLayout = {
  labelCol: {
    span: 4,
  },
  wrapperCol: {
    span: 20,
  },
};
function MyHeader(){
    const [visible, setVisible] = useState(false);
    const [confirmLoading, setConfirmLoading] = useState(false);
    const [form] = Form.useForm();

    const dispatch = useDispatch()
    const navigate = useNavigate()

    function changePassword() {
      form.validate().then((res) => {
        setConfirmLoading(true);
        setTimeout(() => {
          Message.success('Success !');
          setVisible(false);
          setConfirmLoading(false);
        }, 1500);
      });
    }



    return(
        <Header style={{ paddingLeft: 20, position: 'relative'}}>
            <span>My-React-App</span>  
          <Popover
            style={{width: '250px'}}
            content={
            <span>
                <p style={style}>角色：{ '------'}</p>
                <p style={style}>警号：{ '------'}</p>
                <p style={style}>职务：{ '------'}</p>
                <Button type='primary' style={{marginRight: '25px'}} onClick={() => setVisible(true)}>修改密码</Button>
                <Button type='primary' 
                  onClick={()=>{
                    sessionStorage.clear()
                    navigate('/login')
                }}>退出登录</Button>
              </span>
            }
          >
            <IconUser type='primary' style={{position: 'absolute', right: '20px', top: '40%', fontSize: '24px'}}></IconUser>
          </Popover>
          <Modal
            title='Add User'
            visible={visible}
            onOk={changePassword}
            confirmLoading={confirmLoading}
            onCancel={() => setVisible(false)}>
            <Form
              {...formItemLayout}
              form={form}
              layout='vertical'
              labelCol={{
                style: { flexBasis: 90 },
              }}
              wrapperCol={{
                style: { flexBasis: 'calc(100% - 90px)' },
              }}>
              <FormItem label='原密码' field='oldPwd' 
                rules={[
                  { required: true , message: '请输入密码！' },
                  { match: regExpConfig.pwd, message: '请输入6-16位数字或者字母!' },]}>
                <Input placeholder='请输入密码' />
              </FormItem>
              <FormItem label='新密码' field='password' 
                rules={[
                  { required: true , message: '请输入密码！' },
                  { match: regExpConfig.pwd, message: '请输入6-16位数字或者字母!' },
                ]}>
                <Input placeholder='请输入新密码' type='password'/>
              </FormItem>
              <FormItem label='确认新密码' field='confirmPassword' 
                rules={[
                  { required: true , message: '请输入密码！' },
                  { match: regExpConfig.pwd, message: '请输入6-16位数字或者字母!' },
                  {
                    validator(value, cb) {
                      if (value !== form.getFieldValue('password')) {
                        return cb('密码必须相等');
                      }
        
                      return cb();
                    },
                  }]}>
                <Input placeholder='请确认新密码'type='password' />
              </FormItem>
            </Form>
          </Modal>
        </Header>
    )
}

export default MyHeader